<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/web/_layouts/default">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title th:text="${article.title}">预览</title>
    <style>
        body {
            font-size: 16px;
        }

        .post-meta {
            margin: 3px 0 60px 0;
            color: #fff;
            font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        .post-body img {
            box-sizing: border-box;
            margin: auto;
            padding: 3px;
            border: 1px solid #ddd;
            display: block;
            max-width: 100%;
            height: auto;
        }

        .subhead {
            background: #449FD1;
            color: white;
        }
    </style>
</head>
<!--/*@thymesVar id="article" type="in.hocg.web.modules.system.domain.Articles"*/-->
<body>

<div id="pjax-web-container"
     layout:fragment="content">
    <header class="jumbotron subhead" id="overview">
        <div class="container">
            <h1 th:text="${article.title}">标题</h1>
            <p class="lead">
                由 <span th:text="${article.author!='无'?article.author:'匿名'}"></span> 发表于<time title="创建于"
                         th:text="${@iText.format(article.sendAt)}">
                     </time>
            </p>
        </div>
    </header>
    <div class="container">
        <div class="row" style="min-height: 500px;">
            <div class="post-body"
                 th:utext="${article.content}"></div>
        </div>
        <div class="row">
            <div class="comment-holder"
                 th:attr="data-oid=${article.id}"
                 data-type="1"
                 data-avatar="/public/images/default_avatar.gif"
            ></div>
        </div>
    </div>

    <script>
        $(function () {
            setTimeout(function () {
                var comment = new Comment('.comment-holder')
            }, 1000);
        });
    </script>
</div>


</body>
</html>
